<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('字段详细设计')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight add-question">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox-content">
                <input type="hidden" name="pageId" th:value="${pageId}">
                <form class="form-horizontal" id="pageTagForm">

                </form>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<!--页面标签列表-->
<script id="pageTagListTpl" type="text/template">
    <input type="hidden" name="pageTageSize" value="{{d.list.length}}">
    {{# layui.each(d.list, function(index, a){ }}
        <input type="hidden" name="id{{index}}" value="{{a.id}}">
        <div class="form-group col-sm-6">
        <label class="col-sm-4 control-label">主题：</label>
        <div class="col-sm-8">
            <input name="tagName{{index}}" class="form-control" type="text" value="{{a.tagName}}" required>
        </div>
        </div>
        <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">排序：</label>
            <div class="col-sm-4">
                <input name="orderNum{{index}}" class="form-control" type="number" value="{{a.orderNum}}" required>
            </div>
        </div>
    {{# }); }}
</script>
<script th:inline="javascript">
    pageTagList()
    function pageTagList() {
        var config = {
            url:  ctx + "pageTag/pageTag/list",
            type: "GET",
            dataType: "json",
            data: { pageId:$("input[name='pageId']").val()},
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    var data = {};
                    data.list = result.data || [];
                    var pageTagListTplHtml = $("#pageTagListTpl").html();
                    laytpl(pageTagListTplHtml).render(data, function (html) {
                        $("#pageTagForm").empty();
                        $("#pageTagForm").html(html);
                    });
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config);
    }
    function submitHandler() {
        if ($.validate.form()) {
            var pageTageList = []

            for(let i=0;i<$("input[name='pageTageSize']").val();i++){
                pageTageList.push(Object.assign({},
                    {
                        id:$("input[name='id"+i+"']").val(),
                        tagName:$("input[name='tagName"+i+"']").val(),
                        orderNum:$("input[name='orderNum"+i+"']").val()
                    })
                )
            }
            var config = {
                url: ctx + "pageTag/pageTag/listEdit",
                type: "POST",
                dataType: "json",
                async: false,
                data: JSON.stringify(pageTageList),
                contentType: "application/json",
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍后...");
                    $.modal.disable();
                },
                success: function(result) {
                    $.modal.closeLoading();
                    if (result.code == web_status.SUCCESS) {
                        $.modal.close();
                        parent.pageTagList();
                        return false;
                    }
                    if (result.code == web_status.WARNING) {
                        $.modal.alertWarning(result.msg);
                        return false;
                    }
                    $.modal.alertError(result.msg);
                }
            };
            $.ajax(config);
        }
    }
</script>
</body>
</html>